<template>
  <view class="detailRecommendStyle">
    <view class="background"></view>
    <view class="title">
      <text
        :class="current == 'shop' ? 'choosed' : ''"
        @click="changeCurrent('shop')"
        >{{ $t("goods.recommendShop") }}</text
      >
      <text
        :class="current == 'like' ? 'choosed' : ''"
        @click="changeCurrent('like')"
        >{{ $t("goods.like") }}</text
      >
    </view>
    <view class="goodsList">
      <view
        class="goodItem"
        v-for="item in goodsList"
        :key="item.id"
        @click="toGoods(item.id)"
      >
        <view class="goodPic">
          <image :src="item.cover_pic" alt="" mode="aspectFill" />
        </view>
        <view class="goodInfo">
          <text class="goodName">{{ item.name }}</text>
          <text class="price">￥{{ item.price }}</text>
        </view>
      </view>
    </view>
    <view class="btn" @click="$utils.toUrl('/pages/list/list')">{{
      $t("goods.recommendMore")
    }}</view>
  </view>
</template>

<script>
export default {
  props: {
    goodsInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isRefresh: Boolean,
  },
  watch: {
    isRefresh(e) {
      if (e == true) {
        this.getShopRecommend();
      }
    },
  },
  data() {
    return {
      // 商户推荐商品列表
      goodsList: [],
      // 当前所在导航
      current: "shop",
    };
  },
  computed: {},
  methods: {
    // 点击跳转商品详情
    toGoods(e) {
      if (!e || e == 0) {
        return;
      }
      wx.navigateTo({
        url: "/goods/goods/goods?id=" + e,
      });
    },
    // 点击切换导航
    changeCurrent(e) {
      if (e == this.current) {
        return;
      }
      if (e == "shop") {
        this.getShopRecommend();
      }
      if (e == "like") {
        this.getLikeGoods();
      }
    },
    // 获取店铺推荐商品
    async getShopRecommend() {
      try {
        const res = await this.$allrequest.goods.getShopRecommend({
          mch_id: this.goodsInfo.mch ? this.goodsInfo.mch.id : 0,
        });
        if (res.code == 0) {
          this.goodsList = res.data.list;
          this.current = "shop";
        }
      } catch (e) {}
    },
    // 获取猜你喜欢商品
    async getLikeGoods() {
      try {
        const res = await this.$allrequest.goods.getLikeGoods({
          id: this.goodsInfo.id,
        });
        if (res.code == 0) {
          this.goodsList = res.data.list;
          this.current = "like";
        }
      } catch (e) {}
    },
  },
  created() {
    this.getShopRecommend();
  },
};
</script>

<style scoped lang="less">
.detailRecommendStyle {
  position: relative;
  width: 100%;
  padding: 40rpx 30rpx;
  .background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-origin: content;
    background-position: 50% 50%;
    z-index: -1;
    background-color: #fff;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 26rpx;
    color: #262626;
    font-weight: bold;
    .choosed {
      position: relative;
    }
    .choosed::before {
      content: "";
      position: absolute;
      bottom: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 52rpx;
      height: 6rpx;
      border-radius: 4rpx;
      background-color: #fa230a;
    }
  }
  .goodsList {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .goodItem {
      margin-top: 20rpx;
      width: 220rpx;
      margin-right: 8rpx;
      .goodPic {
        width: 220rpx;
        min-width: 220rpx;
        height: 220rpx;
        min-height: 220rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .goodInfo {
        width: 100%;
        padding: 10rpx;
        display: flex;
        flex-direction: column;
        .goodName {
          font-size: 22rpx;
          color: #262626;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
        .price {
          font-size: 24rpx;
          color: #fa230a;
          margin-top: 10rpx;
        }
      }
    }
  }
  .btn {
    width: 266rpx;
    height: 60rpx;
    line-height: 60rpx;
    border: 1px solid #8e8e8e;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    border-radius: 30rpx;
    margin: 20rpx auto 0 auto;
  }
}
</style>
